<template>
  <page-meta :root-font-size="fontsize" class="contact-store">
    <xlNavBar title="店铺联系记录" bgc="ff9d49" :showLeft="true"></xlNavBar>

    <view class="cs-header">
      <view
        class="option"
        :class="optionActive === '1' ? 'active' : ''"
        @click="handleOptionActive('1')"
      >
        想要联系
      </view>
      <view
        class="option"
        :class="optionActive === '2' ? 'active' : ''"
        @click="handleOptionActive('2')"
      >
        已联系
      </view>
    </view>

    <view class="cs-wrapper" v-if="contactList.length > 0">
      <view class="w-content" v-for="item in contactList" :key="item.phone">
        <view class="c-left">
          <view class="phone">
            {{ optionActive === "2" ? item.phone : item.is_contact === 0 ? item.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") : item.phone}}
            {{ optionActive === "2" ? " 拨打过您的电话" : item.is_contact === 0 ? " 对您店铺有兴趣" : " 您已主动与对方联系"}}
          </view>
          <view class="time">
            {{ optionActive === "2" ? "联系时间：" : item.is_contact === 0 ? "提交时间：" : "主动联系时间：" }}
            {{ item.show_time }}
            {{ optionActive === "1" ? "" : "，如未联系上，可主动与对方联系" }}
          </view>
        </view>
        <view class="c-right" @click="handleContact(item)">
          <img class="icon" src="./image/phone.png" mode="widthFix" />
          <view class="text">
            {{ optionActive === "2" ? "快捷拨打" : item.is_contact === 0 ? "联系对方" : "快捷拨打" }}
          </view>
        </view>
      </view>
    </view>

    <view class="cs-null" v-else>
      <img class="image" src="https://canyinxinxi.cn/system_work/contact-null.png" mode="widthFix" />
      <view class="text"> 抱歉，暂无联系记录~ </view>
    </view>

    <TipPopup
      :title="tipOption.title"
      :content="tipOption.content"
      :submitText="tipOption.submitText"
      @submitTip="tipOption.submit()"
      @closeTip="closeTip"
      v-if="tipPopup"
    ></TipPopup>
  </page-meta>
</template>

<script>
import TipPopup from "./components/tipPopup.vue";
export default {
  name: "ContactStore",
  components: { TipPopup },
  data() {
    return {
      fontsize: "",
      optionActive: "1",
      contactList: [],
      tipPopup: false,
      tipOption: {
        title: "",
        content: "",
        submitText: "",
        submit: () => {}
      }
    };
  },
  onLoad(option) {
    let designWidth = 37.5;
    uni.onWindowResize((res) => {
      this.fontsize =
        Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
    });
    uni.getSystemInfo({
      success: (res) => {
        this.fontsize =
          Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
      }
    });
		this.storeId = option.id
    this.getList();
  },
  methods: {
    async getList() {
      let listData = null;
      let resCode = null;
			let params = {
				"purpose_id": this.storeId * 1
			}
      if (this.optionActive === "2") {
        const { code, contact_history } = await this.$http.requestSync(
          "/storefronts/contact_history",
          params,
          "POST"
        );
        listData = contact_history;
        resCode = code;
      } else {
        const { code, intention_history } = await this.$http.requestSync(
          "/storefronts/intention_history",
          params,
          "POST"
        );
        listData = intention_history;
        resCode = code;
      }

      if (resCode === 200) {
        this.contactList = listData;
      } else {
        this.contactList = [];
      }
    },
    handleOptionActive(option) {
      this.optionActive = option;
      this.getList();
    },
    async handleContact(item) {
      if (this.optionActive === "2" || item.is_contact === 1) {
				this.handlePhoneCall(item.phone)
        return
      }
      this.$throttle(async () => {
        this.$checkLogin(async () => {
          let params = { purpose_id: item.purpose_id, user_id: item.user_id };
          let res = await this.$http.requestSync(
            "/storefronts/is_contact_user",
            params,
            "POST"
          );

          if (res.is_contact || res.is_top) {
						this.getList()
            
						this.handlePhoneCall(res.phone)
            return;
          }

          if (res.is_ok) {
            this.tipOption = {
              title: `与对方联系需要消耗${res.integral}积分`,
              submitText: "联系对方",
              content: `您当前剩余${res.user_integral}积分可用，是否立即与对方联系？`,
              submit: async () => {
                let params = {
                  purpose_id: item.purpose_id,
									id: item.id,
                  user_id: item.user_id
                };
                let res2 = await this.$http.requestSync(
                  "/storefronts/contact_user",
                  params,
                  "POST"
                );
                if (res2.code === 200) {
									this.getList()
									this.handlePhoneCall(res2.phone)
                } else {
                  this.tipPopup = false;
                  this.$layer.message(res2.message);
                }
              }
            };
          } else {
            this.tipOption = {
              title: "温馨提示",
              submitText: "去获取积分",
              content: "当前您的积分不足，是否前往获取积分？",
              submit: () => {
                if (this.$isIos() == "IOS") {
                  this.$togo("/pages3/myIntegral");
                } else {
                  this.$togo("/pages3/integralRechargePage");
                }
              }
            };
          }
          this.tipPopup = true;
        });
      });
    },
		handlePhoneCall(phone){
			if (
				this.$getStoraged("systemInfo").platform == "android" ||
				this.$getStoraged("systemInfo").platform == "ios" ||
				this.$getStoraged("systemInfo").platform == "devtools"
			) {
				uni.makePhoneCall({
					phoneNumber: phone.toString(),
					success: () => {
						this.tipPopup = false;
					},
					fail: () => {
						this.tipPopup = false;
					}
				});
			} else {
				uni.showModal({
					title: "查看手机号",
					content: phone,
					success: () => {
						this.tipPopup = false;
					},
				});
			}
		},
    closeTip() {
      this.tipPopup = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.contact-store {
  height: 100vh;
  background: #f7f7f7;
  display: block;
  .cs-header {
    display: flex;
    margin: 10px auto;
    width: 192px;
    height: 36px;
    background: #eeeeee;
    border-radius: 18px;
    .option {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #666666;
      &.active {
        color: #ff8822;
        background: #ffffff;
        border-radius: 18px;
      }
    }
  }

  .cs-wrapper {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    .w-content {
      width: 100%;
      margin: 10px 0;
      padding: 15px;
      box-sizing: border-box;
      border-radius: 8px;
      background: #ffffff;
      display: flex;
      align-items: center;
      .c-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        line-height: 20px;
        .phone {
          font-size: 15px;
          font-weight: 600;
          color: #333333;
        }
        .time {
          color: #999999;
          font-size: 13px;
        }
      }
      .c-right {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90px;
        height: 32px;
        margin-left: 20px;
        border-radius: 16px;
        background: #ff8822;
        .icon {
          width: 22px;
          height: 22px;
        }
        .text {
          font-size: 12px;
          font-weight: 600;
          color: #ffffff;
        }
      }
    }
  }

  .cs-null {
    width: 100%;
    margin-top: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .image {
      width: 180px;
      height: 180px;
    }
    .text {
      margin-top: 10px;
      font-size: 14px;
      color: #999999;
    }
  }
}
</style>
